<template>
    <div class="store-remove">
        <button @click="removeCheck()">Delete</button>

        <!-- 删除弹窗 -->
        <UxDialog :visible="!!dialog" @close="dialog = ''">

            <div class="dialog-remove" :status="dialog">

                <!-- 不可删除 -->
                <template v-if="dialog == 'forbid'">
                    <img src="@/assets/images/template/dialog-notify.png" alt="">
                    <span>This product cannot be deleted because it's being used in an unpaid order.</span>
                    <button @click="dialog = ''" type="primary">Got it</button>
                </template>

                <!-- 可删除 -->
                <template v-if="dialog == 'remove'">
                    <img src="@/assets/images/template/dialog-delete.png" alt="">
                    <strong>Are you sure you want to delete this product?</strong>
                    <span>If you remove this product from PODpartner, it will remain on your storefront, and any of your store orders for this product will not be imported to PODpartner after that.</span>
                    <button @click="remove()" type="primary">Delete</button>
                    <button @click="dialog = ''">Cancel</button>
                </template>
                <UxLoading2 :loading="loading" />

            </div>

        </UxDialog>
    </div>

</template>
<script>
export default {
    props: {
        item: { type: Object, default: () => ({}) },
    },
    data () {
        return {
            loading: false,
            dialog: '',
        };
    },
    methods: {

        // 删除产品
        async removeCheck () {
            this.loading = true;
            this.dialog = 'loading'
            const res = await this.$http("UserStore.checkDeleteByProduct/" + this.item.id);

            if (res.code !== 0) {
                // 获取接口失败
                this.$uxMessage.warning(res.msg);
                this.loading = false
                this.dialog = ''
            } else if (res.data) {
                // 可删除
                this.loading = false;
                this.dialog = 'remove';
            } else {
                // 不可删除
                this.dialog = "forbid"
                this.loading = false
            }
        },

        // 删除
        async remove () {
            this.loading = true;
            const response = await this.$http("UserStore.deleteProduct/" + this.item.id);
            if (response.code === 0) {
                this.$uxMessage.success('Delete product successfully');
                this.loading = false;
                this.dialog = '';
                this.$emit('reload');
            } else {
                this.loading = false;
                this.$uxMessage.warning(response.msg);
            }
        },
    },
    created () {


    },
};
</script>
<style lang="scss" scoped>
.store-remove {
    & > button {
        border: none;
        background: none;
        margin: 0;
        width: 168px;
        height: 34px;
        box-sizing: border-box;
        padding: 0 8px;
        font-size: 14px;
        font-family: Roboto-Regular, Roboto;
        font-weight: 400;
        color: #555555;
        justify-content: flex-start;

        &:hover {
            background: #f6f6f6;
            color: #000;
        }
    }
}

.dialog-remove {
    width: 320px;
    height: 414px;
    box-sizing: border-box;
    padding: 72px 14px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;

    img {
        width: 80px;
        height: 80px;
    }

    &[status='forbid'] {
        span {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            font-size: 16px;
            font-family: Roboto-Regular, Roboto;
            font-weight: 400;
            color: #000000;
            line-height: 22px;
        }
    }

    &[status='remove'] {
        padding-top: 48px;
        strong {
            margin-top: 14px;
            font-size: 14px;
            font-family: Roboto-Medium, Roboto;
            font-weight: 500;
            color: #000000;
            line-height: 22px;
        }
        span {
            flex: 1;
            margin-top: 12px;
            display: flex;
            justify-content: center;
            text-align: center;
            font-size: 14px;
            font-family: Roboto-Regular, Roboto;
            font-weight: 400;
            color: #000000;
            line-height: 22px;
        }
    }

    button {
        margin-top: 8px;
        width: 100%;
    }

    .loading {
        border-radius: 8px;
    }
}
</style>
